<template>
  <div class="main">
    <mine-title>新增模型</mine-title>
    <div class="content">
      <div class="form-wrapper" v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" clearable size="small" />
          </el-form-item>
          <el-form-item label="任务描述" prop="descr">
            <el-input v-model="form.descr" placeholder="请输入" clearable type="textarea" size="small" />
          </el-form-item>
          <el-form-item label="模型类型" prop="fileType">
            <el-select v-model="form.fileType" placeholder="请选择" clearable size="small">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :value="item.id"
                :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="模型导入">
            <el-upload
              class="upload-demo"
              action=""
              drag
              ref="upload"
              :file-list="fileList"
              :auto-upload="false"
              :on-change="onChange"
              :accept="accept">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                选择或拖放数据文件
                <div>支持上传{{accept.replace(/\,/g, '、')}}</div>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="代码规范文档下载">
            <mine-button secondary size="mini" @click="downloadSample">下载模板<i class="iconfont icon-download-line is-right"></i></mine-button>
          </el-form-item>
          <el-form-item class="form-btn-row">
            <mine-button type="primary" @click="cancel" secondary>取 消</mine-button>
            <mine-button type="primary" @click="save">保 存</mine-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      form1: {
        name: '测试任务01',
        descr: '描述描述',
        fileType: 'sklearn',
      },
      form: {
        name: '',
        descr: '',
        fileType: '',
      },
      rules: {
        name: { required: true, message: '请输入任务名称', trigger: 'blur' },
        descr: { required: true, message: '请输入任务描述', trigger: 'blur' },
        fileType: { required: true, message: '请选择模型类型', trigger: 'change' },
      },
      labelWidth: '130px',
      fileList: [],
      accept: '.sav',
      typeList: [
        { id: 'sklearn', name: 'sklearn' },
        { id: 'matlab', name: 'matlab' },
      ],
      basic: {}
    }
  },
  methods: {
    async save () {
      if (!this.doSubmit()) return;
      this.loading = true;
      await this.saveBasic();
      await this.saveFile();
      this.loading = false;
    },
    doSubmit () {
      let flag = true;
      if (!this.$common.doSubmit('form', this)) return;
      if (!this.fileList.length) {
        this.$message({ type: 'warning', message: '请上传文件' });
        return;
      }
      return flag;
    },
    async saveBasic () {
      const params = {
        ...this.form,
        creator: this.$store.getters.userName || '',
      };
      try {
        const res = await this.$store.dispatch('proAdminImportModelTaskSave', params);
        const result = res.data || {};
        if (result.success) {
          this.basic = result.data || {};
        } else {
          this.basic = {};
        }
      } catch (e) {
        console.error(e);
      }
    },
    async saveFile () {
      const id = this.basic.id || '';
      const formData = new FormData();
      formData.append('File',  this.fileList[0].raw);
      const params = {
        id,
        file: formData,
      };

      try {
        const res = await this.$store.dispatch('proAdminImportModelUploadId', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '文件上传成功' });
          this.$router.push('/moduleImport');
        } else {
          this.$message({ type: 'error', message: '文件上传失败' });
        }
      } catch (e) {
        console.error(e);
      }
    },
    downloadSample () {

    },
    onChange (files, fileList) {
      this.fileList = [files];
    },
    cancel () {
      window.history.go(-1);
    },
  }
}
</script>
<style lang="less" scoped>
  .card {
    margin-bottom: 20px;
  }
  .btn-row {
    padding-left: 20px;
    padding-right: 20px;
  }
</style>
